<template>
  <c-row class="c-form-edit" margin>
    <c-col v-show="isEdit" :col="longCol"><slot name="edit"></slot></c-col>
    <c-col v-show="isValue"><slot></slot></c-col>
    <c-col v-show="hasAppend"> <slot name="append"></slot></c-col>
  </c-row>
  <!-- <div class="c-form-edit">
    <slot v-show="isEdit" name="edit"></slot>
    <slot v-show="isValue"></slot>
    <slot v-show="hasAppend" name="append"></slot>
  </div> -->
</template>
<script>
export default {
  name: 'CFormEdit',
  components: {},
  props: {
    value: { type: String, default: '' },
    visible: { type: Boolean, default: false },
    long: { type: Boolean, default: false }
  },
  data() {
    return {}
  },
  computed: {
    isEdit() {
      return this.visible
    },
    isValue() {
      return !this.visible
    },
    hasAppend() {
      return !!this.$slots.append
    },
    longCol() {
      return this.long ? 12 : 0
    }
  },
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {}
}
</script>
<style lang="scss">
.c-form-edit {
  display: inline-block;
  vertical-align: middle;
  //   font-size: 0;
  //   > span {
  //     font-size: 14px;
  //     vertical-align: middle;
  //   }
  //   .el-input,
  //   .el-button {
  //     vertical-align: middle;
  //   }

  //   > .el-select,
  //   .el-cascader {
  //     font-size: 0;
  //     vertical-align: middle;
  //   }
  //   // .el-select > .el-input {
  //   //   vertical-align: middle;
  //   // }
  //   // .el-cascader > .el-input {
  //   //   vertical-align: middle;
  //   // }
}
</style>
